<template>
  <div class="page">
    <!-- <h1>{{seckill}}</h1> -->
  </div>
</template>

<script>
import util from "@/utils/util"; //共有工具方法
export default {
  name: "HelloWorld",
  created() {
    console.log("life star");
    // console.log(util,7788)
    // console.log(util.formatTime(new Date()))
    // console.log(util.uniq([1,22,24,22,68,8,1,564,5,8,5,'1']))
    console.log(util.time2date(15644717050000000));

    this.seckillCountDown();
  },

  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      seckill: [
        {
          etime: "1563529020",
          lasttime:''
        },

        {
          etime: "1563615420",
          lasttime:''
        },
      ]
    };
  },
  methods: {
    //秒杀列表倒计时

    seckillCountDown() {
      let that = this;
      var seckill = that.seckill;
      var nowTime = new Date().getTime();
      for (var i = 0; i < seckill.length; i++) {
        var endTime = seckill[i].etime * 1000 || [];
        var total_micro_second = endTime - nowTime || [];
        if (total_micro_second <= 0) {
          seckill[i].lasttime = "已经结束";
        } else {
          seckill[i].lasttime = that.dateformat(total_micro_second);
        }
      }
      // 渲染倒计时时钟
      that.seckill = seckill;
      setTimeout(function() {
        total_micro_second -= 1000;
        that.seckillCountDown();
      }, 1000);

    }, // 时间格式化输出，如11:03 25:19 每1s都会调用一次

    dateformat(micro_second) {
      let that = this;
      var time = {};
      // 总秒数
      var second = Math.floor(micro_second / 1000); // 天数
      time.day = that.PrefixInteger(Math.floor(second / 3600 / 24), 2); // 小时
      time.hour = that.PrefixInteger(Math.floor((second / 3600) % 24), 2); // 分钟
      time.minute = that.PrefixInteger(Math.floor((second / 60) % 60), 2); // 秒
      time.second = that.PrefixInteger(Math.floor(second % 60), 2);
      return time;
    },

    //不足位数前面补0
    PrefixInteger(num, length) {
      return (Array(length).join("0") + num).slice(-length);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
